<template>
  <el-container style="overflow: hidden">
    <!-- 头部区域 -->
    <el-header
      style="box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); z-index: 1"
    >
      <div class="home_header">
        <img :src="icon" alt="" style="height: 30px; width: 30px" />
        <span style="padding-left: 10px; white-space: nowrap"
          >轻炎食后台管理</span
        >
      </div>
      <div style="display: flex; transform: translateX(-20px)">
        <el-dropdown
          trigger="click"
          @command="handleItemClick"
          placement="bottom"
        >
          <img
            :src="image"
            alt=""
            style="height: 30px; height: 30px; border-radius: 50%"
            class="el-icon-arrow-down el-icon--center"
          />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="exit" @click="quit()"
              >退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <div style="overflow: auto; display: flex; flex: 1">
      <el-aside :width="'200px'" style="overflow: hidden">
        <Aside :menulist="menulist" :isCollapse="isCollapse"></Aside>
      </el-aside>
      <el-main style="width: 100%; padding: 20px">
        <router-view></router-view>
      </el-main>
    </div>
  </el-container>
</template>

<script>
import Aside from "./Aside";
import bus from "../evenBus.js";
import icon from "@/assets/favicon.jpg";
export default {
  data() {
    return {
      icon,
      menulist: [],
      welcome: {},
      isCollapse: false,
      image: require("@/assets/images/user.jpg"),
    };
  },
  methods: {
    // 获取所有菜单
    async getMenuList() {
      // const { data: aside } = await this.$http.get('menus');
      // if (aside.meta.status !== 200) return this.$message.error(aside.meta.msg)
      // aside.data.unshift(this.welcome)
    },
    // 传值
    getdata() {
      bus.$on("share", (val) => {
        this.welcome = val;
      });
    },
    toggleButton() {
      this.isCollapse = !this.isCollapse;
    },
    handleItemClick(command) {
      if (command === "exit") {
        localStorage.removeItem("token");
        // 跳转到登录页，没有历史记录，使用replace
        this.$message.success("登出成功");
        this.$router.replace("/login");
      }
    },
  },
  created() {
    this.getdata();
  },
  components: {
    Aside,
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .home_header {
    position: relative;
    display: flex;
    align-items: center;
    color: #000;
  }
}

.el-main {
  background-color: rgb(255, 255, 255);
  padding-right: 0;
}

.el-container {
  height: 100vh;
}

.router {
  margin: 20px;
  width: 100vw;
}
</style>
